<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css">
    <style>
        .sec__content::after {
            clear: both;
            content: "";
            display: table;
        }
        @font-face {
            font-family:Glyphicons Halflings;
            src: url(fonts/glyphicons-halflings-regular.eot);
            src: url(fonts/glyphicons-halflings-regular.svg);
            src: url(fonts/glyphicons-halflings-regular.ttf);
            src: url(fonts/glyphicons-halflings-regular.woff);
            src: url(fonts/glyphicons-halflings-regular.woff2);
        }
        .banner-v{
            position: relative;
           text-align: center;


        }
        .banner-t{
            position: absolute;
            top: 28%;
            text-align: center;
            overflow: hidden;
            color: #fff;
            width: 100%;
        }
        .d1{
            width: 312px;
            height: 172px;
            margin: 0 auto;
            margin-top: 5px;
            background: url("https://static.aimeike.tv/assets/img/homepage/category-tag/%E5%A9%9A%E7%A4%BC%E8%A7%86%E9%A2%91.jpg");
        }
        .d1:hover{
            -webkit-background-size: 120%;
            background-size: 120%;
        }
        .page__sec.page__sec-light {
            background: #f9f9f9;
        }
        .page__sec {
            position: relative;
            padding-top: 60px;
            padding-bottom: 50px;
        }
        @media (min-width: 768px){
            .container {
                width: 750px;
            }
        }
        .sec__title{
            text-align: center;
        }
        .sec__title {
            margin-bottom: 55px;
        }
        .sec__title h2, .sec__title h5 {
            margin-bottom: 0;
            font-weight: 400;
        }
        .sec__title h2 {
            color: #333;
            margin-top: 0;
        }
        .sec__title h5{
            color: #969696;
            margin-top: 20px;
            line-height: 24px;
            font-size: 14px;
        }
        .use-scenarios__content {
            text-align: center;
            margin-top: 40px;
        }
        .use-scenarios__left {
            display: inline-block;
        }
        .use-scenarios img {
            height: 200px;
        }
        img {
            display: block;
            max-width: 100%;
            height: auto;
        }
        .use-scenarios__right {
            text-align: left;
            vertical-align: top;
            display: inline-block;
            margin-left: 25px;
        }
        .use-scenarios__right p {
            font-size: 1.2rem;
            margin-bottom: 25px;
        }
        p{
            line-height: 1.7;
            margin: 0 0 10px;
        }
        .use-scenarios__hint {
            color: #969696;
            margin-top: 20px;
            margin-bottom: 0;
            line-height: 24px;
        }
        .sec-btn{
            text-align: center;
        }
        .sec-btn .btn {
            padding: 9px 3px;
            width: 11em;
        }
        .bgm-theme{
            box-shadow: none;
            color: #FCFCFC;
            border: 1px solid #4cccbb;
            background-color: #4cccbb;
        }
        .btn{
            display: inline-block;
            border-radius: 2px;
            font-size: 14px;
            font-weight: 400;
            text-align: center;
        }
        .user-register .sec-content {
            max-width: 70em;
            width: 100%;
            position: relative;
            display: inline-block;
        }
        .theme-color {
            color: #4cccbb;
        }
        .user-register .feature-info {
            padding: 0 20px;
            box-sizing: border-box;
        }
        .user-register .feature-info, .user-register .register-btn-group {
            display: inline-block;
            float: left;
            width: 50%;
        }
        .user-register .feature-content {
            display: inline-block;
            text-align: left;
        }
        .user-register .feature-content p {
            color: #666;
            font-size: 1.06667rem;
            margin-bottom: 15px;
        }
        .user-register .feature-info, .user-register .register-btn-group {
            display: inline-block;
            float: left;
            width: 50%;
        }
        .m-b-20 {
            margin-bottom: 20px!important;
        }
        .weixin__register .register-btn {
            background: #6cd86c;
        }
        .user-register-btn .register-btn {
            border-radius: 3px;
            padding: 13px 0;
            color: #FCFCFC;
        }
        .user-register .register__item {
            width: 22em;
            line-height: 20px;
        }
        .user-register a {
            cursor: pointer;
        }
        i{
            text-decoration: none;
        }
        .user-register-btn i {
            margin-right: 5px;
        }
        .fa {
            font: normal normal normal 14px/1 FontAwesome;
            font-size: inherit;
            text-rendering: auto;
            -webkit-font-smoothing: antialiased;
            display: inline-block;
        }

        .weibo__register .register-btn {
            background: #ff5d5d;
        }
        .user-register-btn .register-btn {
            border-radius: 3px;
            padding: 13px 0;
            color: #FCFCFC;
        }
        .user-register a {
            cursor: pointer;
        }
        .user-register .middle-line-text {
            display: inline-block;
            width: 22em;
            height: 20px;
            margin-top: 5px;
            margin-bottom: 5px;
        }
        .middle-line-text {
            position: relative;
        }
        .user-register .middle-line-text p {
            width: 2em;
            display: inline-block;
            color: #b3b3b3;
        }
        .bgm-theme{
            box-shadow: none;
            color: #FCFCFC;
            border: 1px solid #4cccbb;
            background-color: #4cccbb;
        }
        .user-register .help-link {
            margin-top: 5px;
        }
        .help-link {
            font-size: .8rem;
            color: #b3b3b3;
        }
        .theme-color {
            color: #4cccbb;
        }
    </style>

</head>
<body>
<!-- Split button -->
<div class="bg-light fixed-top">
    <div class="container">
        <nav class="navbar  navbar-expand-lg navbar-light bg-light ">
            <a class="navbar-brand" href="#">
                <img src="6.jpg"  class="rounded" alt="" style="width: 40px;height: 40px">
            </a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item active">
                        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Link</a>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Dropdown
                        </a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                            <a class="dropdown-item" href="#">Action</a>
                            <a class="dropdown-item" href="#">Another action</a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="#">Something else here</a>
                        </div>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
                    </li>
                </ul>
                <form class="form-inline my-2 my-lg-0">
                    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
                    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
                </form>
            </div>
        </nav><!-- /.row -->
    </div>
</div>
<div class="banner">
    <div class="banner-v">
        <video width="100%"  src="https://static.aimeike.tv/assets/videos/banners/albumvideo.mp4"
               loop muted autoplay aria-controls=""></video>
        <div class="banner-t">

            <h2>视频制作从未如此简单</h2>

            <h6>一款强大的在线视频制作软件，任何人都能快速上手</h6>

            <button type="button" class="btn btn-success">开始试用</button>
        </div>
    </div>
</div>
<div class="bg-light" style="padding-top: 20px;box-sizing: border-box;margin-bottom: 20px">
    <div class="container">
        <div class="row">
            <div class="text-center col-md-12">
                <h2>如何使用</h2>
                <h6>制作精美视频，仅需三步</h6>
            </div>
        </div>
        <div class="row">
            <div class="text-center col-md-4 col-xs-12">
                <img src="8.jpg" alt="" style="margin: 0 auto">
                <h3>挑选模板</h3>
            </div>
            <div class="text-center col-md-4 col-xs-12">
                <img src="8.jpg" alt="" style="margin: 0 auto">
                <h3>挑选模板</h3>
            </div>
            <div class="text-center col-md-4 col-xs-12" >
                <img src="8.jpg" alt="" style="margin: 0 auto">
                <h3>挑选模板</h3>
            </div>
            <div class="text-center col-md-12">
                <button type="button" class="btn btn-success">开始试用</button>
            </div>
        </div>
    </div>
</div>
<div class="bg-light">
    <div class="container">
        <div class="row">
            <div class="text-center col-md-12" style="margin-bottom: 20px">
                <h2>为各类应用场景而设计</h2>
                <h6>超过百款专业团队精心设计的视频模板，使用它们您也可以立刻做出惊艳的视频</h6>
            </div>
        </div>
        <div class="row">
            <div class="text-center col-md-4 col-xs-12">
                <div class="d1">
                    <p>婚礼视频</p>
                </div>
            </div>
            <div class="text-center col-md-4 col-xs-12">
                <div class="d1">
                    <p>婚礼视频</p>
                </div>
            </div>
            <div class="text-center col-md-4 col-xs-12">
                <div class="d1">
                    <p>婚礼视频</p>
                </div>
            </div>
            <div class="text-center col-md-4 col-xs-12">
                <div class="d1">
                    <p>婚礼视频</p>
                </div>
            </div>
            <div class="text-center col-md-4 col-xs-12">
                <div class="d1">
                    <p>婚礼视频</p>
                </div>
            </div>
            <div class="text-center col-md-4 col-xs-12">
                <div class="d1">
                    <p>婚礼视频</p>
                </div>
            </div>
            <div class="text-center col-md-12" style="margin-top: 10px">
                <button type="button" class="btn btn-success">开始试用</button>
            </div>
        </div>
    </div>
</div>
<div class="use-scenarios page__sec page__sec-light">
    <div class="container">
        <div class="sec__title">
            <h2>满足不同场合视频播放需求</h2>
            <h5>即可一键分享到手机或下载到电脑播放，也支持电视、投影仪和LED等大屏播放</h5>
        </div>
        <div class="sec__content">
            <div class="use-scenarios__content">
                <div class="use-scenarios__left">
                    <img src="https://static.aimeike.tv/assets/img/homepage/index-use-scenarios.png" alt="满足不同场合视频播放需求">
                </div>
                <div class="use-scenarios__right">


                    <p>· 一键分享各大主流社交媒体</p>

                    <p>· MP4视频格式兼容主流播放器</p>

                    <p>· 支持蓝光超清分辨率（1920x1080）</p>

                    <p>· 适用于投影仪、电视、LED等宴会大屏</p>

                </div>
                <div class="use-scenarios__hint text-center">
                    <p>升级至蓝光超清分辨率需付费，可免费预览视频效果，修改满意后再付费下载</p>
                </div>
                <div class="sec-btn">
                    <a class="btn bgm-theme js-track-event" href="" data-track="首页,立即注册按钮">立即注册</a>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="user-register page__sec text-center ">
    <div class="sec__title">
        <h2>免费使用爱美刻</h2>


        <h5>和全球 <span class="theme-color">500 万</span> 用户一起，用视频分享故事、珍藏回忆、展示价值</h5>


    </div>
    <div class="sec-content after__line">
        <div class="feature-info">
            <div class="feature-content">
                <p>· 无需专业知识，5分钟上手，极速出片</p>
                <p>· 超多设计专业的模板，满足各类需求</p>
                <p>· 蓝光超清成片，支持投影仪、LED大屏播放</p>
                <p>· 支持一键分享微信朋友圈</p>
            </div>
        </div>
        <div class="sec__content register-btn-group js-register-btn-group">
            <div class="weixin__register user-register-btn m-b-20">
                <a class="btn register-btn register__item js-third-party-btn
          js-track-event" data-track="首页,底部注册,微信" data-platform="weixin">
                    <i class="fa fa-weixin"></i>
                    微信注册
                </a>
            </div>
            <div class="weibo__register user-register-btn">
                <a class="btn register-btn register__item js-third-party-btn
          js-track-event" data-track="首页,底部注册,微博" data-platform="weibo">
                    <i class="fa fa-weibo"></i>
                    微博注册
                </a>
            </div>
            <div class="user-register-btn">
                <div class="middle-line-text register__item">
                    <p>或</p>
                </div>
            </div>
            <div class="phone__register user-register-btn">
                <a class="btn register-btn bgm-theme register__item
          js-track-event" data-track="首页,底部注册,手机号" href="">
                    使用手机号注册
                </a>
                <p class="help-link">
                    已经是爱美刻用户了？在这里
                    <a class="theme-color " href="">
                        登录
                    </a>
                </p>
            </div>
        </div>
    </div>
</div>


</body>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/js/bootstrap.min.js"></script>
</html>